<template>
  <div class="wBgColor">
    <div class="maxWidth flexCon flexColumn">
      <h1 class="fontS30 fonBold marT35">您正在注册安徽省广播电视局账号</h1>
      <div class="line marT35"></div>
      <p class="marTB40 fontS14">手机和短信注册，目前仅支持中国大陆地区</p>
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item v-bind="formItemLayout" label="账户">
          <a-input
            class="hei46"
            v-decorator="[
              'phone',
              {
                rules: [
                  {
                    required: true,
                    message: '账户不能为空',
                  },
                ],
              },
            ]"
            placeholder="请输入手机号码"
          >
            <a-icon
              type="mobile"
              slot="prefix"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
          <a-input
            v-decorator="[
              'password',
              {
                rules: [
                  {
                    required: true,
                    message: '密码不能为空',
                  },
                  {
                    validator: validateToNextPassword,
                  },
                ],
              },
            ]"
            type="password"
            placeholder="请输入密码"
          >
            <a-icon
              type="lock"
              slot="prefix"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
          <div class="fontS14 colorB8">6-16位任意字符，区分大小写</div>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
          <a-input
            v-decorator="[
              'password1',
              {
                rules: [
                  {
                    required: true,
                    message: '确认密码不能为空',
                  },
                  {
                    validator: compareToFirstPassword,
                  },
                ],
              },
            ]"
            type="password"
            placeholder="确认密码"
            @blur="handleConfirmBlur"
          >
            <a-icon
              type="lock"
              slot="prefix"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>

        <a-form-item :wrapperCol="{ span: 24 }">
          <a-button type="primary" size="large" block @click="getCode">
            点击获取验证码
          </a-button>
        </a-form-item>
        <a-form-item
          v-if="isYzm"
          v-bind="formItemLayout"
          label="验证码"
          has-feedback
        >
          <a-input
            v-decorator="[
              'phone',
              {
                rules: [
                  {
                    required: true,
                    message: '验证码不能为空',
                  },
                ],
              },
            ]"
            placeholder="输入手机验证码"
          >
            <a-icon
              type="mobile"
              slot="prefix"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 24 }">
          <a-checkbox @change="onChange">
            <span class="agreement">
              阅读并同意
              <span>《服务协议》</span>
              及
              <span>《服务条款隐私政策》</span>
            </span>
          </a-checkbox>
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 24 }">
          <a-button type="danger" size="large" block> 提交 </a-button>
        </a-form-item>
      </a-form>
      <!-- html-type="submit" -->
    </div>
  </div>
</template>

<script>
const residences = [
  {
    value: "zhejiang",
    label: "Zhejiang",
    children: [
      {
        value: "hangzhou",
        label: "Hangzhou",
        children: [
          {
            value: "xihu",
            label: "West Lake",
          },
        ],
      },
    ],
  },
  {
    value: "jiangsu",
    label: "Jiangsu",
    children: [
      {
        value: "nanjing",
        label: "Nanjing",
        children: [
          {
            value: "zhonghuamen",
            label: "Zhong Hua Men",
          },
        ],
      },
    ],
  },
];

export default {
  data() {
    return {
      confirmDirty: false,
      residences,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 17 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
      isYzm: false,
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "register" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("password")) {
        callback("Two passwords that you enter is inconsistent!");
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(["confirm"], { force: true });
      }
      callback();
    },
    handleWebsiteChange(value) {
      let autoCompleteResult;
      if (!value) {
        autoCompleteResult = [];
      } else {
        autoCompleteResult = [".com", ".org", ".net"].map(
          (domain) => `${value}${domain}`
        );
      }
      this.autoCompleteResult = autoCompleteResult;
    },
    onChange(e) {
      console.log(`checked = ${e.target.checked}`);
    },
    getCode() {
      this.isYzm = true;
    },
  },
};
</script>

<style lang="scss" scoped>
body {
  background-color: #fff !important;
}

.maxWidth {
  max-width: 790px;
  margin: 0 auto;
  background-color: #fff;
}
.line {
  width: 790px;
  height: 1px;
  background-color: #e5e5e5;
}
.colorB8 {
  color: #b8bcbf;
}
.agreement {
  color: #ccc;
  span {
    color: #1a60ff;
  }
}
</style>